<template>
	<view class="forget-pwd-container">
		<view class="header">
			<text class="title">重置密码</text>
		</view>
		
		<view class="form-container">
			<!-- 手机号输入 -->
			<view class="input-group">
				<view class="label">手机号</view>
				<input type="number" v-model="phone" placeholder="请输入注册手机号" maxlength="11" class="input" />
			</view>
			
			<!-- 验证码输入 -->
			<view class="input-group">
				<view class="label">验证码</view>
				<input type="number" v-model="verificationCode" placeholder="请输入验证码" maxlength="6" class="input verification-input" />
				<button class="verification-btn" :disabled="cooldown > 0" @tap="getVerificationCode">
					{{ cooldown > 0 ? `${cooldown}秒后重发` : '获取验证码' }}
				</button>
			</view>
			
			<!-- 新密码输入 -->
			<view class="input-group">
				<view class="label">新密码</view>
				<input :type="showPassword ? 'text' : 'password'" v-model="password" placeholder="请输入新密码" class="input" />
				<text class="toggle-password" @tap="togglePasswordVisibility">{{ showPassword ? '隐藏' : '显示' }}</text>
			</view>
			
			<!-- 确认新密码 -->
			<view class="input-group">
				<view class="label">确认密码</view>
				<input :type="showConfirmPassword ? 'text' : 'password'" v-model="confirmPassword" placeholder="请再次输入新密码" class="input" />
				<text class="toggle-password" @tap="toggleConfirmPasswordVisibility">{{ showConfirmPassword ? '隐藏' : '显示' }}</text>
			</view>
			
			<!-- 密码规则提示 -->
			<view class="password-tips">
				<text>密码必须包含字母和数字，长度为6-20位</text>
			</view>
			
			<!-- 提交按钮 -->
			<button class="submit-btn" @tap="resetPassword">重置密码</button>
			
			<!-- 返回登录 -->
			<view class="back-to-login" @tap="goToLogin">
				<text>返回登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import userApi from '@/api/user.js'
	
	export default {
		data() {
			return {
				phone: '',
				verificationCode: '',
				password: '',
				confirmPassword: '',
				showPassword: false,
				showConfirmPassword: false,
				cooldown: 0,
				timer: null
			}
		},
		methods: {
			// 获取验证码
			async getVerificationCode() {
				// 验证手机号
				if (!this.validatePhone()) {
					return;
				}
				
				// 发送验证码请求
				uni.showLoading({
					title: '发送中...'
				});
				
				try {
					await userApi.getPhoneVerifyCode(this.phone);
					uni.hideLoading();
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					});
					
					// 开始倒计时
					this.cooldown = 60;
					this.timer = setInterval(() => {
						this.cooldown--;
						if (this.cooldown <= 0) {
							clearInterval(this.timer);
						}
					}, 1000);
				} catch (error) {
					uni.hideLoading();
					console.error('获取验证码失败:', error);
					uni.showToast({
						title: '获取验证码失败',
						icon: 'none'
					});
				}
			},
			
			// 切换密码可见性
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword;
			},
			
			// 切换确认密码可见性
			toggleConfirmPasswordVisibility() {
				this.showConfirmPassword = !this.showConfirmPassword;
			},
			
			// 验证手机号
			validatePhone() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return false;
				}
				
				if (!/^1\d{10}$/.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			},
			
			// 验证密码
			validatePassword() {
				if (!this.password) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					});
					return false;
				}
				
				if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/.test(this.password)) {
					uni.showToast({
						title: '密码必须包含字母和数字，长度为6-20位',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.confirmPassword) {
					uni.showToast({
						title: '请确认新密码',
						icon: 'none'
					});
					return false;
				}
				
				if (this.password !== this.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			},
			
			// 重置密码
			async resetPassword() {
				// 验证手机号和密码
				if (!this.validatePhone() || !this.validatePassword()) {
					return;
				}
				// 验证验证码
				if (!this.verificationCode) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				
				// 发送重置密码请求
				uni.showLoading({
					title: '提交中...'
				});
				
				try {
					// 构建重置密码请求数据
					const data = {
						phone: this.phone,
						code: this.verificationCode,
						password: this.password
					};
					
					// 调用重置密码接口
					await userApi.resetPassword(data);
					
					uni.hideLoading();
					uni.showToast({
						title: '密码重置成功',
						icon: 'success',
						duration: 2000,
						success: () => {
							// 延迟跳转，让用户看到成功提示
							setTimeout(() => {
								this.goToLogin();
							}, 2000);
						}
					});
				} catch (error) {
					uni.hideLoading();
					console.error('密码重置失败:', error);
					uni.showToast({
						title: '密码重置失败',
						icon: 'none'
					});
				}
			},
			
			// 跳转到登录页
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		},
		// 组件销毁时清除定时器
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		}
	}
</script>

<style>
.forget-pwd-container {
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f8f8f8;
}

.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 60rpx;
	margin-top: 40rpx;
}

.logo {
	width: 160rpx;
	height: 160rpx;
	margin-bottom: 20rpx;
}

.title {
	font-size: 44rpx;
	font-weight: bold;
	color: #333;
}

.form-container {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 40rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.input-group {
	position: relative;
	margin-bottom: 40rpx;
}

.label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 16rpx;
	font-weight: 500;
}

.input {
	width: 100%;
	height: 88rpx;
	border: 1px solid #e0e0e0;
	border-radius: 8rpx;
	padding: 0 24rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}

.verification-input {
	width: 60%;
}

.verification-btn {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 36%;
	height: 88rpx;
	line-height: 88rpx;
	background-color: #007AFF;
	color: #fff;
	font-size: 28rpx;
	padding: 0;
}

.verification-btn[disabled] {
	background-color: #cccccc;
	color: #ffffff;
}

.toggle-password {
	position: absolute;
	right: 24rpx;
	bottom: 30rpx;
	color: #007AFF;
	font-size: 28rpx;
}

.password-tips {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 40rpx;
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	background-color: #007AFF;
	color: #fff;
	font-size: 32rpx;
	border-radius: 8rpx;
	margin-top: 20rpx;
}

.back-to-login {
	text-align: center;
	margin-top: 40rpx;
	color: #007AFF;
	font-size: 28rpx;
}
</style>
